<template>
	<view class="Row2 flex--col">
		<CategoryList :categories="categories" @selectCategory="handleSelectCategory"></CategoryList>
		<RouteWarn :showWarn="showWarn"></RouteWarn>
		<view class="route-list flex--row" >
			<view v-for="route in routeList" class="route-list-item" :key="route.id">
				<RouteItem :route="route"></RouteItem>
			</view>
		</view>
		<navigator url="/pages/chux/addroute" class="add flex--row">
			<text class="text--secondary-dark">添加新路线</text>
			<image src="@/static/pen-Bold.svg" class="icon" aria-label="添加新路线"></image>
		</navigator>
	</view>
</template>

<script>
	import CategoryList from "./CategoryList.vue"
	import RouteItem from "./RouteItem.vue"
	import RouteWarn from "./RouteWarn.vue"
	import * as RouteApi from "@/api/route/route.js"
	import * as AssistApi from "@/api/assist/blind.js"
	import store from "@/store/index.js"
	import { REFRESH_ROUTES } from "@/core/constant/event.js"
	
	export default{
		components:{
			CategoryList,
			RouteItem,
			RouteWarn
		},
		props:['role'],
		data(){
			return {
				category:"",
				routeList:[],
				categories:[],
				showWarn:0
			}
		},
		watch:{
			routeList(newVal,_){
				if(newVal.length === 0){
					this.showWarn = 1
				}else{
					this.showWarn = 2
				}
			},
			deep:true
		},
		methods:{
			handleSelectCategory(category){
				this.category = category === "离你最近" ? "":category
				this.getRouteList()
			},
			getRouteList(){
				const routeListParam = {
						userId:store.getters.userId,
						category:this.category
						}
				 RouteApi.routesList(routeListParam)
						.then(data => {
							this.routeList = data
							})
						.catch(err => this.$error(err))
			},
			async getCategoryList(){
				const result = await RouteApi.categoryList()
				this.categories = result.map(el => el.category)
			},
			async initData(){
				await this.getCategoryList()
				this.getRouteList()
			}
		},
		mounted(){
			this.showWarn = this.role === 0? 0 : 1
		},
		async created(){
			await this.initData()
			uni.$on(REFRESH_ROUTES,() => {
				this.initData()
				}) 
		}
	}
</script>

<style lang="scss" scoped>
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 600;
		color:#333;
	}
	
	.Row2{
		width: 100%;
		justify-content: flex-start;
		gap:12px;
		.zi{
			width: 134px;
			height: 26px;
			font-size: 18px;
			font-weight: 900;
			line-height: 21.6px;
			
		}
		.add{
			@include border-four-roundings;
			padding:6px 12px;
		
			align-items: center;
			justify-content: space-between;
			image{
				width: 24px;
				height: 24px;
			}

		}
	}
	
	.route-list{
		width:100%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		
		gap:16px;
		
		&-item{
			width:100%;
			height:100%;
			flex-shrink:0;
			scroll-snap-align: center;
		}
	}
	
</style>